<template>
  <div>
    <FormDialog
      :title="title"
      :isShow.sync="isShow"
      :width="width"
      :height="height"
      v-on:resetForm="close()"
    >
      <div class="addAndEditGoods">
        <div class="form">
          <el-form ref="form" :rules="rules" :model="form" label-width="150px">
            <el-form-item label="商品名称：" prop="goods_name">
              <el-input
                type="textarea"
                v-model="form.goods_name"
                placeholder="例如：夏季最新款连衣裙"
              ></el-input>
            </el-form-item>
            <el-form-item v-if="!currentState" label="商家id：" prop="role_id">
              <el-input-number
                v-model="form.role_id"
                controls-position="right"
                :min="1"
                :max="10"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="商品数量：" prop="goods_nums">
              <el-input-number
                v-model="form.goods_nums"
                controls-position="right"
                :min="1"
                :max="10"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="商品单价：" prop="goods_price">
              <el-input-number
                v-model="form.goods_price"
                controls-position="right"
                :min="1"
                :max="10"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="商品类型：" prop="goods_type">
            <TreeSelect
              size="small"
              :data="tableData"
              :defaultProps="defaultProps"
              :checkedKeys="checkedKeys"
              v-model="selectClassify"
              nodeKey="value"
            />
              <!-- <el-select v-model="form.goods_type" placeholder="请选择">
                <el-option
                  v-for="item in shopsType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="商品规格：" prop="goods_spec">
              <el-input
                v-model="form.goods_spec"
                placeholder="例如：小件"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品描述：" prop="goods_describe">
              <el-input
                v-model="form.goods_describe"
                placeholder="例如：来自新疆的正宗水果"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品状态：" prop="state">
              <el-select v-model="form.state" placeholder="请选择">
                <el-option
                  v-for="item in shopsState"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit(currentState)">{{stateName}}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </FormDialog>
  </div>
</template>

<script>
import { addShop,updateGoods,getAllType } from "@/js/api/manage";
import TreeSelect from "@/components/index/TreeSelect";
import FormDialog from "@/components/index/formDialog";
export default {
  name: "addGoods",
  components: {
    FormDialog,
    TreeSelect,
  },
  data() {
    return {
      stateName: "新增",
      title: "新增商品",
      width: "60%",
      height: "1000px",
      isShow: false,
      currentState:true,
      form: {
        goods_name: "",
        goods_nums: "",
        goods_price: "",
        goods_type: "",
        goods_spec: "",
        goods_describe: "",
        role_id:"",
        state: true,
      },
      tableData:[],
      defaultProps: {
        children: "children",
        label: "label",
      },
      checkedKeys: [],
      selectClassify: {},
      value: "",
      num: "",
      shopsState: [
        { label: "上架", value: true },
        { label: "已下架", value: false },
      ],
      shopsType: [
        { label: "手机", value: "phone" },
        { label: "电脑", value: "computer" },
        { label: "电视", value: "tv" },
        { label: "路由器", value: "route" },
      ],
      rules: {
        goods_name: [
          { required: true, message: "请填写商品名称", trigger: "blur" },
        ],
        goods_nums: [
          { required: true, message: "请填写商品数量", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请填写商品价格", trigger: "blur" },
        ],
        goods_type: [
          { required: true, message: "请选择商品类型", trigger: "blur" },
        ],
        goods_spec: [
          { required: true, message: "请填写商品规格", trigger: "blur" },
        ],
        goods_describe: [
          { required: true, message: "请填写商品描述", trigger: "blur" },
        ],
        role_id:[
          { required: true, message: "商家id不能为空", trigger: "blur" },
        ],
        state: [{ required: true, message: "请选择商品状态", trigger: "blur" }],
      },
    };
  },
  methods: {
    loadList(){
      getAllType({page:'no'}).then(response=>{
        if(response.data.state){
          this.tableData = response.data.data
        }
      })
    },
    onSubmit(state) {
      if(this.selectClassify.value!="" && this.selectClassify.label!=""){
        this.form.goods_type = this.selectClassify.value
      }
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(state){
            this.form.goods_launch_time = this.utils.time.dateFormat(new Date());
            this.form.role_id = 1;
            addShop(this.form).then((response) => {
              if (response.data.state) {
                this.utils.tips.success(response.data.msg);
              } else {
                this.utils.tips.error(response.data.msg);
              }
              this.close()
            });
          }else{
            updateGoods(this.form).then(response=>{
              if(response.data.state){
                this.utils.tips.success(response.data.mag)
                this.close()
              }
            })
          }
        }
      });
    },
    add() {
      this.isShow = true;
      this.currentState = true
      this.loadList()
    },
    edit(val) {
      this.form = val
      this.stateName = "修改";
      this.title = "修改 id："+val.id
      this.currentState = false
      this.isShow = true;
      this.loadList()
    },
    resetForm() {
      this.$refs["form"].resetFields();
      this.selectClassify = {}
    },
    close() {
      this.resetForm()
      this.$emit("refresh")
      this.isShow = false;
    },
  },
};
</script>
<style lang="less">
.addAndEditGoods {
  background: white;
  margin-top: 10px;
  width: 100%;
  height: 100%;
  min-height: 430px;
  .form {
    padding-top: 20px;
    padding-right: 50px;
  }
  .el-form {
    border: 1px solid white;
  }
}
</style>